<template>
    <view class="register-container">
        <view class="form-container">
            <u-form :model="form" ref="uForm">
                <u-form-item label="手机号" prop="phone">
                    <u-input v-model="form.phone" placeholder="请输入手机号" type="number"></u-input>
                </u-form-item>
                <u-form-item label="验证码" prop="code">
                    <u-input v-model="form.code" placeholder="请输入验证码" type="number">
                        <template #suffix>
                            <u-button size="mini" type="primary" @click="getCode" :disabled="countdown > 0">
                                {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
                            </u-button>
                        </template>
                    </u-input>
                </u-form-item>
                <u-form-item label="密码" prop="password">
                    <u-input v-model="form.password" type="password" placeholder="请输入密码"></u-input>
                </u-form-item>
                <u-form-item label="确认密码" prop="confirmPassword">
                    <u-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码"></u-input>
                </u-form-item>
            </u-form>
            
            <view class="btn-group">
                <u-button type="primary" @click="handleRegister">注册</u-button>
                <u-button type="info" plain @click="navigateTo('/pages/login/login')">已有账号？去登录</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import request from '@/util/request'

export default {
    data() {
        return {
            form: {
                phone: '',
                code: '',
                password: '',
                confirmPassword: ''
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { len: 6, message: '验证码长度不正确', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码不能少于6位', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                        if (value !== this.form.password) {
                            callback(new Error('两次输入的密码不一致'))
                        } else {
                            callback()
                        }
                    }, trigger: 'blur' }
                ]
            },
            countdown: 0
        }
    },
    methods: {
        async getCode() {
            try {
                await this.$refs.uForm.validateField('phone')
                
                const res = await request.post('/api/sms/send', {
                    phone: this.form.phone,
                    type: 'register'
                })
                
                if (res.code === 200) {
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'success'
                    })
                    this.countdown = 60
                    const timer = setInterval(() => {
                        this.countdown--
                        if (this.countdown <= 0) {
                            clearInterval(timer)
                        }
                    }, 1000)
                } else {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        async handleRegister() {
            try {
                await this.$refs.uForm.validate()
                
                const res = await request.post('/api/register', this.form)
                if (res.code === 200) {
                    uni.showToast({
                        title: '注册成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/login/login'
                        })
                    }, 1500)
                } else {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        navigateTo(url) {
            uni.navigateTo({
                url
            })
        }
    }
}
</script>

<style lang="less" scoped>
.register-container {
    padding: 60rpx 40rpx;
    
    .form-container {
        .btn-group {
            margin-top: 60rpx;
            
            .u-button {
                margin-bottom: 30rpx;
            }
        }
    }
}
</style> 